<div data-role="page" data-add-back-btn="true" id="news">
  <div data-role="header" data-position="fixed" data-theme="b">
    <h1>Latest news</h1>
	<a href="#home" data-icon="home" data-direction="reverse" data-iconpos="notext" class="ui-btn-right">Home</a>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true" id="articleList" data-filter="true">
    <li data-role="list-divider">Forcewide news</li>
    
    <script type="text/javascript">
      // forked from rotsuya's "RSS Reader with jQuery Mobile" http://jsdo.it/rotsuya/411c
      /* configuration */
      var maxLength = 10;
      /* writing HTML */
      for(var i=1; i<=maxLength; i++){
      document.write(
        '<li id="news' + i + '"><a href="#article' + i + '" id="link' + i + '">&nbsp;</a></li>'
      );
      }
      document.write(
      '    </ul>' +
      '    <ul data-role="listview" data-inset="true">' +
      '    <li data-role="list-divider">More news</li>' +
      '    <li><a href="#newsletters"><img src="../images/email.png" class="ui-li-icon">Email newsletters</a></li>' +
	  '    <li><a href="ringmaster.html"><img src="../images/ringmaster.png" class="ui-li-icon">Ringmaster</a></li>' +
      '    </ul>' +
      '  </div>' +
      '</div>'
      );
      for(i=1; i<=maxLength; i++){
      document.write(
        '<div data-role="page" id="article' + i + '">' +
        '  <div data-role="header" data-position="fixed" data-position="inline">' +
        '    <a href="#news" data-role="button" data-icon="arrow-l" data-back="true">Back</a>' +
        '    <h1 id="articleHeader' + i + '">&nbsp;</h1>' +
        '    <a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' +
        '      class="ui-btn-right" rel="external">Read</a>' +
        '  </div>' +
        '  <div data-role="content">' +
        '    <div id="articleContent' + i + '" class="articleContent"></div>' +
        '    <div data-role="controlgroup" data-type="horizontal">' +
        '      <a href="#article' + String(i-1) + '" data-role="button" data-icon="arrow-l"' +
        '        data-inline="true" class="prevButton">Previous</a>' +
        '      <a href="#article' + String(i+1) + '" data-role="button" data-icon="arrow-r"' +
        '        data-inline="true" class="nextButton" data-iconpos="right">Next</a>' +
        '    </div>' +
        '  </div>' +
        '</div>'
      );
      }
      /* JSONP */
      $(function(){
      getOnlineFeed('http://www.northyorkshire.police.uk/rss-news');
      });
      /* functions */
      var listEntries = function(json) {
      if (!json.responseData.feed.entries) return false;
      $('#widgetTitle').text(json.responseData.feed.title);
      var articleLength =json.responseData.feed.entries.length;
      articleLength = (articleLength > maxLength) ? maxLength : articleLength;
      for (var i = 1; i <= articleLength ; i++) {
        var entry = json.responseData.feed.entries[i-1];
        $('#link' + i).text(entry.title);
        $('#articleHeader' + i).text(entry.title);
        $('#openButton' + i).attr('href', entry.link);
        $('#articleContent' + i).append(entry.content);
      }
      $('#article1 .prevButton').remove();
      $('#article' + articleLength + ' .nextButton').remove();
      if (articleLength < maxLength) {
        for (i = articleLength + 1; i <= maxLength; i++) {
        $('#news' + i).remove();
        $('#article' + i).remove();
        }
      }
      };
      var getOnlineFeed = function(url) {
      var script = document.createElement('script');
      script.setAttribute('src', 'http://ajax.googleapis.com/ajax/services/feed/load?callback=listEntries&hl=ja&output=json-in-script&q='
                + encodeURIComponent(url)
                + '&v=1.0&num=' + maxLength);
      script.setAttribute('type', 'text/javascript');
      document.documentElement.firstChild.appendChild(script);
      };
  </script>